<style lang="less">
@import "../../../assets/style/yhqx_detail.less";
</style>

<template>
	<mxq-router-layout>
		<div class="detail quexian_detail" v-cloak>
			<Head slot="header" @headerClick="headerClick($event)">
				<div slot="headerTitle">
					<span>缺陷详情</span>
				</div>
				<div slot="headerRight">
					<i class="iconfont icon-shouye"/>
					<!-- <van-icon class="home" name="home"/> -->
				</div>
			</Head>

			<van-cell-group class="mt10">
				<!-- 详情列表信息 start-->
				<van-field
					v-for="(item,index) in detailShow" :key="index"
					center
					clearable
					:label="item.tit"
					required
					readonly>
					<van-button slot="button" size="mini" plain type="primary">{{item.val}}</van-button>
				</van-field>
				<!-- 详情列表信息 end-->
				<van-field
					class="detail_item"
					clearable
					label="缺陷照片"
					required
					disabled>
					<van-icon slot="icon" class="slot-cont">
						<!-- 历史缺陷照片回显及放大功能 start-->
						<div class="quexian_photo_box">
							<img v-for="(img,index) in historyImgArray" 
							:key="index" :src="img" 
							@click="hisImgPreview(historyImgArray,index)" alt=""
							class="quexian_photo">
						</div>
						<!-- 历史缺陷照片回显及放大功能 end-->
					</van-icon>
				</van-field>
			</van-cell-group>

			<span  v-if="this.$route.query.towerStatus==0 || this.$route.query.towerStatus==2"></span>
			<van-cell-group class="mt10" v-show="isShow" v-else>
				<van-field
					class="detail_item"
					clearable
					label="缺陷处理方式"
					required
					disabled>
					<!-- switch开关 start-->
					<van-icon slot="icon" class="slot-cont">
						<span class="left">
							<label for="sfcl" class="check_label">缺陷核查</label>
							<van-switch v-model="defectVerification" size="20px" @change="changeStatus('1')" />
						</span>
						<span class="right">
							<label for="sfcl" class="check_label">缺陷消除</label>
							<van-switch v-model="defectElimination" class="chk_r" size="20px" @change="changeStatus('2')" />
						</span>
					</van-icon>
					<!-- switch开关 end-->
				</van-field>
			</van-cell-group>

			<van-cell-group class="mt10">
				<van-field
					class="detail_item"
					clearable
					label="缺陷处理照片"
					required
					disabled>
					<van-icon slot="icon" class="slot-cont">
						<span  v-if="this.$route.query.towerStatus==0 || this.$route.query.towerStatus==2"></span>
						<div  v-show="isShow" v-else>
							<p class="photo_holder">请拍摄缺陷处理后照片（发现缺陷时可以立即消除
						，点击上面的“缺陷”按钮，弹出下面的“缺陷处理”
						拍照）</p>

							<!-- 拍照 start -->
							<take-photo
								:photoLists="photoLists1"
								@getPhotosOne="getPhotosOne"
								:showHide="showHide"
								@newArr="newArrOne"/>
							<!-- 拍照 end -->
						</div>

						<!-- 缺陷处理历史照片回显 start-->
						<div class="quexian_photo_box">
							<img v-for="(img,index) in newImgArray" 
							:key="index" :src="img" 
							@click="ImgPreview(newImgArray,index)" alt=""
							class="quexian_photo">
						</div>
						<!-- 历史照片回显 end-->

					</van-icon>
				</van-field>
			</van-cell-group>

			<span  v-if="this.$route.query.towerStatus==0 || this.$route.query.towerStatus==2"></span>
			<van-button v-else
				size="large" 
				type="primary" 
				class="upload"
				v-show="isShow" 
				@click="upLoad">
				确定
			</van-button>
		</div>
	</mxq-router-layout>
</template>

<script>
import Head from '@/components/head'
import photoImg from '../../../assets/img/changguixunshi/icon_allow.png'
import qxSecete from '../../components/quexian/add_quexian.vue'
import TakePhoto from '../../components/quexian-photo.vue'
import { fileData, callData, fileUrl } from '../../../axios/axios'

import {
	Row,
    Col,
    Cell,
    CellGroup,
	Field,
	Button,
	Icon,
	Switch,
	ImagePreview,
	Toast,
	Dialog
} from 'vant'

export default {
    name: 'quexianDetail',
    components: {
		Head,
		TakePhoto,
		qxSecete,
		[Row.name]:Row,
		[Col.name]:Col,
        [CellGroup.name]: CellGroup,
        [CellGroup.name]: CellGroup,
		[Field.name]: Field,
		[Button.name]: Button,
		[Icon.name]: Icon,
		[Switch.name]: Switch,
		[ImagePreview.name]: ImagePreview,
		[Toast.name]: Toast,
		[Dialog.name]: Dialog
	},
	data() {
		return {
			showHide: true,				//用于任务已完成状态隐藏拍照按钮
			xzDetail: [], 				//列表详情
			photoImg: photoImg,			//拍照图标
			defectVerification: true,	//缺陷核查
			defectElimination: false,	//缺陷消除
			pictureType: 1,				// 1 核查，0消缺
			isShow: false,				//控制显示：缺陷处理方式、确定
			detailShow: [],				//列表详情数据
			listType: [],				//列表详情Key
			DefectPhotos: [],           //缺陷处理照片
            defectPhotoFileList:[],     //缺陷处理-图片文件
			historyImgs: [],			//历史缺陷照片回显
			defectsImgs: [],			//缺陷处理照片回显
			photoNewArr: [],			//缺陷图片-删除图片后的新图片数组
			newImgArray: [],			//缺陷处理照片回显放大
			historyImgArray: [],		//历史缺陷照片回显放大
			defectsUpload: '',          //新增缺陷上传
			cmDefectReviewId: '',       //缺陷复核表ID
			photoLists1: [
                {
                    title: "缺陷处理照片",
                    type: 'getPhotosOne',
                    photo:[]
                }
			],
			getListData:{},				// 填写缺陷信息返回的数据		
		}
	},
	mounted() {
		this.getDetailData();
    },
	created(){
		var _this = this;
		_this.displayShow()
		_this.cameraHide()
	},
    methods: {
		// 头部两侧按钮点击事件
		headerClick(e){
			this.$router.push({name:"index"})
		},
		// 任务状态为已完成即taskStatus=2隐藏拍照图标
		cameraHide(){
			if(this.$route.query.towerStatus == 2){
				this.showHide = false;
			}
		},
		// 缺陷照片-拍照回调 andriod
		getPhotosOne(params){
			this.getListData = params
			console.log('缺陷照片-拍照回调',params)
		},
		// 缺陷处理照片-删除
		newArrOne(params){
			this.photoNewArr = params
			console.log('接收到的newArrOne', this.photoNewArr);
		},
		// 点击确定按钮
		upLoad(event) {
			let imgData1 = this.getListData
			console.log('imgData1',imgData1);
			console.log('imgData1-length=>', imgData1.file.length);
			console.log('photoNewArr',this.photoNewArr.length);
			//限制必须拍照
			if((imgData1.file && imgData1.file.length == 0  && this.photoNewArr.length == 0)){
            	Dialog.alert({
					title: '提示',
					message: '请拍照！'
				}).then(() => {
					
				});
            	return
			}

			var getListData = this.getListData;
			var params = {};
			params.jd = imgData1.jdwd[0].lon     //经度
			params.wd = imgData1.jdwd[0].lat     //纬度
			console.log('缺陷lon',imgData1.jdwd[0].lon);
			console.log('缺陷lat',imgData1.jdwd[0].lat);
			params.defectId = this.$route.query.defectId;			//缺陷ID
            params.lineId = this.$route.query.lineId;               //线路ID
            params.lineTowerId = this.$route.query.lineTowerId;     //杆塔线路ID
            params.towerId = this.$route.query.towerId;             //物理杆塔ID
            params.taskId = this.$route.query.taskId;               //任务ID
            params.taskType = this.$route.query.index;     			//任务类型 常规0 特殊1
            params.towerTaskId = this.$route.query.towerTaskId;     //杆塔任务ID
            params.defectStatus = 1;                                //页面状态 0新增页面，1复核和消缺页面
			params.defectType = this.$route.query.defectType;       //缺陷类型
			//审核类型reviewType ''新增，0复核，1消除
            if(this.defectVerification == true) {
                params.reviewType = 0;
                this.pictureType = 1
            }
            else if (this.defectElimination == true) {
                params.reviewType = 1;
                this.pictureType = 0
			}
			console.log('params:',params);

			callData('/accountServer/CmDefect/addOrReviewDefect', 'post', params).then(res => {
				console.log('接口参数params',params);
				if(res.success){
					this.qxscData = res.data;							//缺陷数据
					this.defectsUpload = res.data.cmDefectId;           //缺陷ID
					this.cmDefectReviewId = res.data.cmDefectReviewId; //缺陷复核表ID
					// 缺陷处理照片-遍历上传
                    for(var i = 0; i<imgData1.file.length;i++){
                    	console.log(1111)
                    	if(window.Cordova){
		                    let filePath = imgData1.file[i]      //图片信息
                    		let params2 = {}
		                        params2.taskId = this.$route.query.taskId                //任务ID
		                        params2.towerTaskId = this.$route.query.towerTaskId    	 //杆塔任务ID
		                        params2.towerId = this.$route.query.towerId              //物理杆塔ID
		                        params2.lineTowerId = this.$route.query.lineTowerId      //杆塔线路ID
		                        params2.jd = imgData1.jdwd[i].lon                        //经度
		                        params2.wd = imgData1.jdwd[i].lat                        //纬度
		                        params2.defectReviewId = this.cmDefectReviewId           //缺陷复核表ID
		                        params2.defectId = this.defectsUpload                    //缺陷ID
								params2.pictureType = this.pictureType
							console.log('params2===',params2);
							fileData('/fileserver/CmDefectPicture/saveCmDefectPicture', 'post',params2,filePath).then(res => {
	                        	Toast(res.data);
							})
                    	}else{
                    		let params2 = new FormData()
		                        params2.append("taskId",this.$route.query.taskId)                //任务ID
		                        params2.append("towerTaskId",this.$route.query.towerTaskId)    	 //杆塔任务ID
		                        params2.append("towerId",this.$route.query.towerId)              //物理杆塔ID
		                        params2.append("lineTowerId",this.$route.query.lineTowerId)      //杆塔线路ID
		                        params2.append("jd",imgData1.jdwd[i].lon)                        //经度
		                        params2.append('wd',imgData1.jdwd[i].lat)                        //纬度
		                        params2.append('defectReviewId',this.cmDefectReviewId)           //缺陷复核表ID
		                        params2.append('defectId',this.defectsUpload)                    //缺陷ID
		                        params2.append("file",imgData1.file[i])      		 			 //图片信息
								params2.append("pictureType",this.pictureType)
								console.log('params2===',params2);
								fileData('/fileserver/CmDefectPicture/saveCmDefectPicture', 'post',params2).then(res => {
									Toast(res.data);
								})
						}
                    }
				}
				else {
					Toast(res.data)
				}
				// 返回上一页
				this.$router.go(-1)
			})
		},
		displayShow:function(){
			var _this =this;
			_this.listType = ['线路名称','运行塔号','缺陷类型','缺陷定性','缺陷内容','缺陷级别','原因分析','发现时间']
		},
		// 缺陷列表详情数据渲染
		getDetailData() {
			var params = {};
			params.defectId = this.$route.query.defectId;		//缺陷ID
			params.towerTaskId = this.$route.query.towerTaskId;	//杆塔任务ID
            callData('/accountServer/CmDefect/findDefectDetailsAndPicture', 'get', params).then(res => {
				var _this = this;
				// 详情
				var xzData = res.data.CMDEFECT;
				if(xzData.PROCESS_TYPE==0){
					xzData.PROCESS_TYPE = '处理'
				}else {
					xzData.PROCESS_TYPE = '未处理'
				}
				_this.detailShow = [
					{'tit': _this.listType[0],'val': xzData.LINE_NAME},
					{'tit': _this.listType[1],'val': xzData.TOWER_NAME},
					{'tit': _this.listType[2],'val': this.$route.query.name},
					{'tit': _this.listType[3],'val': xzData.DEFECT_CHARACTERIZATION},
					{'tit': _this.listType[4],'val': xzData.DEFECT_CONTENT},
					{'tit': _this.listType[5],'val': xzData.DEFECT_CLASSIFICATION},
					{'tit': _this.listType[6],'val': xzData.CAUSE_ANALYSIS},
					{'tit': _this.listType[7],'val': xzData.FIND_TIME}
				]
				_this.xzDetail = xzData

				//历史缺陷照片回显
				_this.historyImgs = res.data.CMDEFECTPICTURE;
				_this.historyImgs.forEach((item,index) =>{
					var imgPath = fileUrl(item.FILE_PATH);
					console.log('imgPath',imgPath);
					_this.historyImgArray.push(imgPath);//转为数组
				})
				_this.historyImgs = _this.historyImgArray;
				console.log('historyImgArray:',_this.historyImgArray);
				
				//缺陷处理照片回显
				_this.defectsImgs = res.data.CMDEFECTPICTUREYOU;
				_this.defectsImgs.forEach((item,index) =>{
					var imgPath = fileUrl(item.FILE_PATH);
					_this.newImgArray.push(imgPath);//转为数组
				})
				_this.defectsImgs = _this.newImgArray;
				console.log('newImgArray--',_this.newImgArray);
			})
			// 审核类型为待审核3，才可以复核、消除
			if(this.$route.query.reviewType == 3){
				this.isShow = true
			}
			if(this.$route.query.towerStatus==2){
				this.isShow = false
			}
		},
		// switch 开关
		changeStatus(num){
			if(num==1){
				if(this.defectVerification==true){//开缺陷核查
					this.defectElimination = false;
				}else {//关缺陷消除
					this.defectElimination = true;
				}
			}
			if(num==2){//开缺陷消除
				if(this.defectElimination == true){
					this.defectVerification = false;
				}else {//关缺陷核查
					this.defectVerification = true;
				}
			}
		},
		// 缺陷处理栏目图片放大
		ImgPreview(img,index){
			var _this = this;
			ImagePreview({
				images: _this.newImgArray,
				startPosition: index,
				showIndex: true
			});
		},
		// 缺陷处理方式栏目图片放大
		hisImgPreview(img,index){
			var _this = this;
			ImagePreview({
				images: _this.historyImgArray,
				startPosition: index,
				showIndex: true
			});
		}
	}
}
</script>